<template>
	<view>
		<!-- 主体表单 -->

		<view class="main1">
			<view class="back-btn yticon icon-zuojiantou-up"></view>
			<view class="title_des">欢迎使用智慧云教育APP</view>
			<view class="item">
				<image class="login_image" src="/static/login/userName.png"></image>
				<input v-model="userName" class="main-input" placeholder="请输入账号" />
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="/static/login/password.png"></image>
				<input v-model="password" class="main-input" type="password" placeholder="请输入密码" />
			</view>
		</view>
		<view class="btn_login" @click="bindLogin">登录</view>
		<!-- 底部信息 -->
		<view class="footer" style="margin-top: 16px">
			<view>
				<navigator url="/pages/my/register/select" open-type="navigate">新用户注册</navigator>
			</view>
			<view style="margin-left: 32%;">
				<navigator url="/pages/my/forget/person" open-type="navigate">忘记密码</navigator>
			</view>
		</view>
		<view class="weixinLogin">
			<view style="border: 1upx inset;width:30%;float: left;margin-top: 2%;margin-left: 3%;border-color: #F8F8F8;"></view>
			第三方账号登录
			<view style="border: 1upx inset;width:30%;float: right;margin-top: 2%;margin-right: 3%;border-color: #F8F8F8;"></view>
		</view>
		<!-- 其他登录 -->
		<view class="other_login cuIcon">
			<view class="login_icon_wx">
				<image style="width: 50px;height: 50px;" src="/static/wx.png" @tap="bindWeChatLogin"></image>
			</view>
		</view>
		<view class="footer_des">你的教育专家</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				userName: '',
				password:''
			}
		},
		
		onLoad () {
			
		},


		methods: {
			...mapMutations(['login']),

			bindWeChatLogin () {
				uni.showToast({
					icon: 'none',
					title: '功能暂未开放'
				});
			},

			bindLogin() {
				if (!this.userName) {
					uni.showToast({
						icon: 'none',
						title: '请输入账号'
					});
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return
				}
				uni.showLoading({
					title: '正在登录'
				});
				this.$httpApi.post('/student/login', {
					userName: this.userName,
					password: this.password
				})
				.then(res => {
					if (res.code === 1) {
						uni.hideLoading()
						uni.showToast({
							title: res.message
						})

						let studentInfo = {
							name: res.data.name,
							headImg: res.data.headImg,
							id: res.data.id
						}
						this.$store.commit('user/updateStudentInfo', studentInfo)
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 100)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
				
			}
		}
	};
</script>

<style>
	@import url('/static/css/main.css');
	@import url('/static/css/icon.css');
	.type {
		display: flex;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		width: 100%;
	}

	.title_des {
		font-weight: bold;
		color: #0055b8;
		font-size: 22px;
		margin-bottom: 32px;
	}

	.login_icon_wx {
		color: #999999;
		border: none;
	}

	.weixinLogin {
		color: #999999;
		text-align: center;
		font-size: 12px;
		margin-top: 60px;
		left: auto;
		right: auto;
	}

	.footer_des {
		color: #666666;
		text-align: center;
		font-size: 14px;
		margin-top: 40px;
	}

	.getCode {
		font-size: 14px;
		margin-left: 40px;
		color: #0055b8;
	}

	.item {
		line-height: 40px;
		display: flex;
	}

	.login_image {
		margin-top: 8px;
		width: 20px;
		height: 25px;
	}

	.main-input {
		font-size: 14px;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		height: 40px;
		line-height: 40px;
	}

	.main-input-code {
		width: 70%;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.btn_login {
		color: #ffffff;
		font-size: 16px;
		width: 260px;
		height: 40px;
		background: #0055b8;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 45px;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28 upx;
		padding-right: 10 upx;
		margin-left: 20 upx;
	}
</style>
